<template>
    <div class="ChartsLoan">
        <el-card class="bill-month-wrapper" style="margin-bottom: 20px" shadow="never">
            <div style="height: 56px;"></div>

            <el-row :gutter="10">
                <el-col :xs="24" :sm="24" :md="14" :lg="15" :xl="18" style="margin-bottom: 20px">
                    <ChartsLine
                        title="每月还款账单趋势"
                        :style="{height: '300px', width: '100%'}"
                        :dataSource="monthsValues"
                    ></ChartsLine>
                </el-col>
                <el-col :xs="24" :sm="24" :md="10" :lg="9" :xl="6" style="margin-bottom: 20px">
                    <div class="ranking-wrap">
                        <div class="ranking-title">最近待还账单</div>
                        <ul class="ranking-list">
                            <template v-if="rankings.length !== 0">
                                <li
                                    v-for="(item, index) in rankings"
                                    :key="index"
                                    class="ranking-item is-link"
                                    @click="toOutstandingBill"
                                >
                                    <div class="content">
                                        <div class="ranking-left">
                                            <div class="ranking-title">{{ item.fromName }}</div>
                                            <div class="ranking-datetime">{{ item.fromTime }}</div>
                                        </div>
                                        <div class="ranking-right">
                                            <span>
                                                <i>￥</i>
                                                {{ item.fromMoney }}
                                            </span>
                                        </div>
                                    </div>
                                </li>
                            </template>

                            <template v-else>
                                <li class="ranking-item" style="border: 0">暂无数据</li>
                            </template>
                        </ul>
                    </div>
                </el-col>
            </el-row>
        </el-card>
        <el-row :gutter="20" style="margin-bottom: 20px">
            <!-- <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-card style="height: 500px;">
                    <div style="height: 56px;"></div>
                </el-card>
            </el-col> -->
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-card style="height: 500px;" shadow="never">
                    <div style="height: 56px;"></div>
                    <ChartsPie
                        title="账单状态统计"
                        :style="{
                            height: '400px',
                            width: '100%'
                        }"
                        :dataSource="billStatusList"
                        :is-update="isUpdateChartsResize"
                    ></ChartsPie>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import ChartsPie from '@/components/Charts/Pie';
import ChartsLine from '@/components/Charts/Line';
import {getBillLatest, getBillStatusList, getChartsBillMonthCashs, getChartsBillYearCashs} from '@/api/home';
import {BASIC_MONEY} from '@/utils/constant';
// import FullScreen from '@/components/FullScreen/index';
import variables from '@/styles/variables.scss';
import {keep2decimalPlaces, getBillStatusText} from '@/filters';
import moment from 'moment';
import {BILL_LIST} from '@/router/route-name';

export default {
    name: 'ChartsLoan',
    props: {
        resizeRandomId: {
            type: String
        },
        height: {
            type: String,
            default: '200px'
        }
    },
    components: {
        ChartsPie,
        ChartsLine
        // FullScreen
    },
    data() {
        return {
            isUpdateChartsResize: `acb${Math.random()}`,
            billStatusList: [],
            monthsValues: {},
            isFullScreenCount: false, // 统计的全屏组件
            isFullScreenLine: false, // 折线图的全屏组件
            theTimeoutId: null,
            rankings: []
        };
    },
    watch: {
        resizeRandomId(val) {
            this.isUpdateChartsResize = val;
        },
        isFullScreenCount() {
            clearTimeout(this.theTimeoutId);
            this.theTimeoutId = setTimeout(() => {
                this.isUpdateChartsResize = `acb${Math.random()}`;
            }, 15);
        },
        isFullScreenLine() {
            clearTimeout(this.theTimeoutId);
            this.theTimeoutId = setTimeout(() => {
                this.isUpdateChartsResize = `acb${Math.random()}`;
            }, 15);
        }
    },
    computed: {
        isWeixin() {
            return this.$store.getters['app/isWeixin'];
        }
    },
    created() {
        this.getBillLatest();
        this.getBillStatusList();
        this.getChartsBillMonthCashs();
    },
    methods: {
        toOutstandingBill() {
            this.$router.push({name: BILL_LIST});
        },
        getBillLatest() {
            const newItem = {
                page: 1,
                pageSize: 3
            };
            getBillLatest(newItem).then(({data: res}) => {
                if (res.status === 200) {
                    // let data = res.data || [];
                    // data = data.map(item => ({name: item.title, value: item.value / BASIC_MONEY}));
                    // this.billStatusList = data;
                    this.rankings = res.data.map(i => {
                        return {
                            fromName: i.name,
                            fromMoney: keep2decimalPlaces(i.stages.cash / BASIC_MONEY),
                            fromTime: moment(i.stages.date).format('MM-DD HH:mm')
                        };
                    });
                } else {
                    throw res;
                }
            });
        },
        getBillStatusList() {
            getBillStatusList().then(({data: res}) => {
                if (res.status === 200) {
                    let data = res.data || [];
                    data = data.map(item => ({name: item.title, value: item.value / BASIC_MONEY}));
                    this.billStatusList = data;
                } else {
                    throw res;
                }
            });
        },
        getChartsBillMonthCashs() {
            getChartsBillMonthCashs().then(({data: res}) => {
                if (res.status === 200) {
                    // eslint-disable-next-line
                    const dateArr = res.dateArr;

                    const colorMap = {
                        '1': variables.colorSuccess,
                        '2': variables.colorInfo,
                        '3': variables.colorDanger,
                        '1,2,3': variables.colorPrimary
                    };

                    const xAxisData = dateArr.map(item => item[0]);

                    const names = [];

                    const series = res.data.map(item => {
                        const dataSource = xAxisData.map(month => {
                            const element = item.data.find(c => c.month === month);
                            if (element) {
                                return element.value / BASIC_MONEY;
                            }
                            return 0;
                        });
                        const name = getBillStatusText(item.status.join(',') - 0);
                        names.push(name);
                        return {
                            name,
                            type: 'line',
                            // https://blog.csdn.net/qq_36538012/article/details/88889545
                            // stack: '',
                            data: dataSource, // item.data.map(i => i.value / BASIC_MONEY),
                            symbol: 'emptyCircle', // 标记图形
                            symbolSize: 4, // 标记的大小 默认值为4
                            lineStyle: {
                                width: 2 // 线的宽度 默认为2
                            },
                            silent: true, // 取消点击事件
                            color: [colorMap[item.status.join(',')]] // 颜色
                            // ,
                            // markPoint: {
                            //     show: true,
                            //     symbol: 'pin', // 标记(气泡)的图形
                            //     symbolSize: 1, // 标记(气泡)的大小
                            //     label: {
                            //         align: 'left',
                            //         position: 'top',
                            //         distance: 5,
                            //         // color: colorPrimary,
                            //         color: 'green',
                            //         formatter: '{b}' // b为 data: [{xAxis: '2020-04-17'}] 中的name值
                            //     },
                            //     itemStyle: {
                            //         color: 'rgba(0, 0, 0, 0.2)'
                            //     },
                            //     // data: [{name: '04-17', value: 30, xAxis: '2020-04-17', yAxis: 30}]
                            //     // data: [{type: 'max', name: '今天'}]
                            //     data: [
                            //         // {xAxis: '2020-04-17', yAxis: '30.00', name: '04-17 30.00'}
                            //         // {type: 'max', name: '最大值 2271.07'}
                            //     ]
                            // },
                            // markLine: {
                            //     symbol: ['circle', 'arrow'], // 标记(气泡)的图形
                            //     symbolSize: 2, // 标记(气泡)的大小
                            //     lineStyle: {
                            //         width: 1.2,
                            //         color: 'green'
                            //     },
                            //     label: {
                            //         distance: 2,
                            //         position: 'end', // star end middle
                            //         color: 'green',
                            //         formatter: '{b}' // b为 data: [{xAxis: '2020-04-17'}] 中的name值
                            //     },
                            //     data: [
                            //         // {
                            //         //     name: '最大值',
                            //         //     // 支持 'average', 'min', 'max'
                            //         //     type: 'max'
                            //         // },
                            //         // {
                            //         //     name: '平均值',
                            //         //     // 支持 'average', 'min', 'max'
                            //         //     yAxis: 'average'
                            //         // },
                            //         // {yAxis: 1250.39, name: '平均值 3330'}
                            //         // {yAxis: 1250.39, name: '平均值'}
                            //     ]
                            // }
                        };
                    });

                    const option = {
                        title: {
                            text: '每月还款账单趋势',
                            left: 'left',
                            // padding: [0, 0, 0, 0],
                            textStyle: {
                                fontWeight: 'normal',
                                fontSize: 14
                            }
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            top: 15,
                            data: names,
                            selected: {还款中: true, 已结清: false, 已逾期: false, 总计: false}
                            // data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
                        },
                        grid: {
                            left: '0%',
                            right: '1%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {title: ''}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: xAxisData
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: series
                        // series: [
                        //     {
                        //         name: '邮件营销',
                        //         type: 'line',
                        //         stack: '总量',
                        //         data: [120, 132, 101, 134, 90, 230, 210]
                        //     },
                        //     {
                        //         name: '联盟广告',
                        //         type: 'line',
                        //         stack: '总量',
                        //         data: [220, 182, 191, 234, 290, 330, 310]
                        //     }
                        // ]
                    };

                    this.monthsValues = option;
                } else {
                    throw res;
                }
            });
        }
    }
};
</script>
<style lang="scss" scoped>
@import './ranking.scss';

.bill-month-wrapper {
    ::v-deep {
        .el-card__body {
            padding: 0 20px 20px 20px;
        }
    }
}
</style>
